<template>
	<image class="load" src="/static/loading.gif" v-if="isload"></image>
	<view class="container" v-else>
		<view class="form">
			<view class="form-item">
				<text class="form-label">影响类型：</text>
				<picker :value="typeIndex" mode="selector" :range="typeList1" @change="typeChange">
					<text class="picker">{{typeList[typeIndex].name}}</text>
				</picker>
			</view>
			<view class="form-item">
				<text class="form-label">影响对象：</text>
				<picker :value="relationIndex" mode="selector" :range="relationList1" @change="relationChange">
					<text class="picker">{{relationList[relationIndex].user_name}}</text>
				</picker>
			</view>
			<view class="form-item">
				<text class="form-label">影响原因：</text>
				<input class="form-input" type="text" v-model="addReq.change_name" />
			</view>
			<view class="form-item">
				<text class="form-label">影响积分：</text>
				<input class="form-input" type="number" v-model.number="addReq.score" />
			</view>
			<view class="form-item">
				<button class="submit-button" @click="submitForm">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		publicRelationList,
		patriarchScoreAdd
	} from '@/api/api.js'
	export default {
		data() {
			return {
				isload: true,
				typeList: [{
					key: 1,
					name: "加分"
				}, {
					key: 2,
					name: "扣分"
				}],
				typeList1: ["加分", "扣分"],
				typeIndex: 0,
				relationList: [],
				relationList1: [],
				relationIndex: 0,
				addReq: {
					change_name: "",
					change_type: 1,
					score: null,
					user_sid: "",
				}
			}
		},
		onLoad() {
			this.onRelationList()
		},
		methods: {
			typeChange(e) {
				this.typeIndex = e.detail.value;
				this.addReq.change_type = this.typeList[this.typeIndex].key
			},
			relationChange() {
				this.relationIndex = e.detail.value;
				this.addReq.user_sid = this.typeList[this.relationIndex].user_uuid
			},
			onRelationList() {
				publicRelationList().then(res => {
					console.log(res.data)
					if (res.data.code != 0) {
						uni.showToast({
							icon: "none",
							title: res.data.message
						})
					} else {
						this.relationList = res.data.data
						if (this.relationList.length > 0) {
							this.addReq.user_sid = this.relationList[0].user_uuid
							for (let item of this.relationList) {
								this.relationList1.push(item.user_name)
							}
						}

					}
					this.isload = false
				})
			},
			submitForm() {
				console.log(this.addReq)
				patriarchScoreAdd(this.addReq).then(res => {
					console.log(res.data)
					if (res.data.code != 0) {
						uni.showToast({
							icon: "none",
							title: res.data.message
						})
					} else {
						uni.showToast({
							icon: "none",
							title: "新增成功"
						})
						uni.reLaunch({
							url: '/pages/index/index'
						});

					}
				})

			},
		}
	}
</script>

<style>
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		background-color: #f2f2f2;
	}

	.form {
		width: 80%;
		background-color: #fff;
		border-radius: 10px;
		padding: 20px;
		box-shadow: 0 0 10px #ccc;
	}

	.form-item {
		display: flex;
		flex-direction: column;
		margin-bottom: 20px;
	}

	.form-label {
		font-size: 16px;
		margin-bottom: 10px;
	}

	.form-input,
	.form-textarea {
		border: none;
		border-radius: 5px;
		padding: 10px;
		font-size: 16px;
		color: #333;
		background-color: #f2f2f2;
	}

	.picker {
		color: #333;
		font-size: 16px;
	}

	.submit-button {
		background-color: #007aff;
		color: #fff;
		border: none;
		border-radius: 5px;
		padding: 10px 20px;
		font-size: 16px;
		cursor: pointer;
	}

	.submit-button:hover {
		background-color: #0066cc;
	}

	.load {
		display: flex;
		position: absolute;
		margin-top: 350rpx;
		z-index: 3;
		margin-left: 70rpx;
	}

	@media screen and (max-width: 768px) {
		.form {
			width: 90%;
		}
	}
</style>